/*
 * @Description:
 * @Author: liyuhao
 * @Date: 2021-06-23 18:34:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-27 15:39:39
 */
import React, {useEffect, useState} from "react";
import "./index.less";
import {getReportTheme} from "@/services/report";
import {useRequest} from "ahooks";
import {Space, DatePicker} from "antd";
import {getCurrentUser} from "@/utils/authority";
import CreateEnumMap from "@/utils/CreateEnumMap";
import dayjs from "dayjs";

export enum DateTypeEnum {
  All, // 全部
  Year = "year", // 年报
  Quarter = "quarter", // 季报
  Month = "month", // 月报
  Holiday = "holiday", // 节假日
  HalfYear = "half_year", // 半年
  CUSTOM = "custom", // 自定义
}

export const DateTypeMap = CreateEnumMap([
  {
    id: DateTypeEnum.All,
    name: "全部",
  },
  {
    id: DateTypeEnum.Year,
    name: "年报",
  },
  {
    id: DateTypeEnum.Quarter,
    name: "季报",
  },
  {
    id: DateTypeEnum.Month,
    name: "月报",
  },
  {
    id: DateTypeEnum.Holiday,
    name: "节假日",
  },
  {
    id: DateTypeEnum.HalfYear,
    name: "半年",
  },
  {
    id: DateTypeEnum.CUSTOM,
    name: "自定义",
  },
]);

export enum HolidayPrevEnum {
  All,
  Holiday = "holiday", // 节假日
  CUSTOM = "custom", // 自定义
}

export const HolidayPrevMap = CreateEnumMap([
  {
    id: DateTypeEnum.All,
    name: "全部",
  },
  {
    id: DateTypeEnum.Holiday,
    name: "节假日",
  },
  {
    id: DateTypeEnum.CUSTOM,
    name: "自定义",
  },
])

export enum HolidayNextEnum {
  All,
  Year = "year", // 年报
  Quarter = "quarter", // 季报
  Month = "month", // 月报
  Holiday = "holiday", // 节假日
  CUSTOM = "custom", // 自定义
}

export const HolidayNextMap = CreateEnumMap([
  {
    id: DateTypeEnum.All,
    name: "全部",
  },
  {
    id: DateTypeEnum.Year,
    name: "年报",
  },
  {
    id: DateTypeEnum.Quarter,
    name: "季报",
  },
  {
    id: DateTypeEnum.Month,
    name: "月报",
  },
  {
    id: DateTypeEnum.Holiday,
    name: "节假日",
  },
  {
    id: DateTypeEnum.CUSTOM,
    name: "自定义",
  },
])

interface Option {
  id?: number | string | undefined;
  name?: string;
}

type HandleSelectChange = (id?: number | string | undefined) => void;

interface SearchCardRowProps {
  title?: string;
  options?: Option[];
  selected?: number | string | undefined;
  onChange?: HandleSelectChange;
}

export interface SearhValues {
  type?: number | string | undefined;
  dateType?: number | string | undefined;
  zoneCode?: number;
}

export interface SearchCardProps {
  onChange?: (values?: SearhValues) => void;
  style?: React.CSSProperties;
}

const SearchCardRow: React.FC<SearchCardRowProps> = (props) => {
  const {title, options, selected, onChange} = props;

  return (
    <div className="selection-container">
      <span className="selection-title">{title}</span>
      <div className="selection-items">
        {(options || []).map((v) => (
          <span
            className={`selection-item ${
              v.id === selected ? "selection-item-selected" : ""
            }`}
            key={v.id}
            onClick={() => onChange && onChange(v.id)}
          >
            {v.name}
          </span>
        ))}
      </div>
    </div>
  );
};
const typeMap: { [key: string | number]: Option[] } = {
  '1': HolidayPrevMap,
  '2': HolidayNextMap,
}

const SearchCard: React.FC<SearchCardProps> = (props) => {
  const {onChange, style} = props;
  const [type, setType] = useState<any>("2");
  const [dateType, setDateType] = useState<any>(HolidayPrevEnum.All);

  const handleTypeChange: HandleSelectChange = (id) => {
    setType(id);
    if (id === '1') {
      setDateType(HolidayPrevEnum.All)
    }
    if (id === '2') {
      setDateType(HolidayNextEnum.All)
    }
  };

  const handleDateTypeChange: HandleSelectChange = (id) => {
    setDateType(id);
  };

  const handleDateChange = (data: any) => {
    if (data?.length > 0) {
      const startTime = dayjs(data[0]).format("YYYY-MM-DD");
      const endTime = dayjs(data[1]).format("YYYY-MM-DD");
      const _values = {
        type: type,
        scope: "custom",
        startTime,
        endTime,
      };
      onChange && onChange(_values);
    }
  };

  useEffect(() => {
    const _values = {
      type: type,
      scope: dateType === 0 ? undefined : dateType,
    };
    onChange && onChange(_values);
  }, [dateType, type]);

  return (
    <div className="search-card" style={style}>
      <SearchCardRow
        title="报告分类"
        options={[{id: "1", name: "文旅市场运行报告"}]}
        selected={"1"}
      />
      <div className="divider"></div>
      <SearchCardRow
        title="报告主题"
        options={[
          {id: "1", name: "节前研判"},
          {id: "2", name: "节后总结"},
        ]}
        selected={type}
        onChange={handleTypeChange}
      />
      <div className="divider"></div>
      <Space>
        <SearchCardRow
          title="时间类型"
          options={typeMap[type]}
          selected={dateType}
          onChange={handleDateTypeChange}
        />
        {dateType == "custom" && (
          <DatePicker.RangePicker onChange={handleDateChange}/>
        )}
      </Space>
    </div>
  );
};

export default SearchCard;
